<template>
  <div class="list xui-padding-xs xui-margin-vertical-sm">
    <div class="list__img">
      <router-link :to="href">
        <img-box :height="435" :imgSrc="item.coverUrl">
        </img-box>
      </router-link>
    </div>
    <div class="list__text xui-padding-sm xui-padding-bottom-0">
      <router-link :to="href">
        <h4>{{item.title}}</h4>
      </router-link>
      <ul id="v-for-info">
        <li v-for="(item,index) in info" :key="index" class="xui-text-truncate">
          {{item}}
        </li>
      </ul>
      <ul id="v-for-info">
        <li class="xui-text-truncate">
          {{item.contact}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import ImgBox from "@/components/widge/img-box";
  import imgSrc from "@/assets/images/list/big-img-list.png";
  export default {
    components: {
      "img-box": ImgBox
    },
    props: {
      item: Object,
      href: String
    },
    data() {
      return {
        imgSrc: imgSrc
      };
    },
    computed: {
      info() {
        if (this.item.contentSummary) {
          return this.item.contentSummary.split("\n");
        }
      }
    }
  };

</script>

<style lang='less' scoped>
  .list {
    width: 100%;
    border: 1px solid #e7e6dd;
  }

  .list .list__img {
    width: 100%;
    height: 435px;
  }

  .list .list__img a {
    display: block;
  }

  .list .list__text h4 {
    font-size: 20px;
    color: #bf9c51;
    font-weight: normal;
    margin-bottom: 10px;
  }

  .list .list__text li {
    font-size: 14px;
    color: #252525;
    line-height: 30px;
    background: url("../../assets/images/list/dot.png") no-repeat left 10px;
    padding-left: 15px;
  }

</style>
